<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转线条小狗</title>
	
	<script src="../js/jquery-1.11.1.js"></script>
	<style>
	  .imga{
	    animation:gou .8s linear infinite;
		 }
	   @keyframes gou{
	    0%{
	         transform: rotate(180deg);
	        }
	     30%{
	         transform: rotate(360deg);
	        }
	     100%{
	         transform: rotate(720deg);
	     }
	     }
	                        
 .imgb{
	 animation:gouzi .8s linear infinite;
	                         }
	 @keyframes gouzi{
	0%{
		transform: rotateY(180deg) scale(1);
	                        }
	30%{
	    transform: rotateY(360deg) scale(1.2);
	                        }
	100%{
	     transform: rotateY(720deg) scale(1.4);
	                        }
	                         }
	</style>
	</head>
	<body>
		<img  src="../img/gou.gif" alt="1" />
		<button id="btn1">开始</button>
		<button id="btn2">暂停</button>
		<button id="btn3">反转</button>
		<audio src="../好汉歌.MP3" autoplay></audio>
		<script>
			/*jq 页面图片改变 而且 旋转*/
			$("#btn1").click(function(){
			//元素 上属性  | 元素可以加类名	
			$("img").attr("src","../img/gouzi.gif").addClass("imga");
			});
			
			//暂停   $("audio").removeAttr("src");
			$("#btn2").click(function(){
			//元素  上属性   |   元素可以加类名
			$("img").attr("src","../img/gouzi.gif").removeClass("imga");
			 $("audio").removeAttr("src");
			            });
			//翻转： Y轴  缩放    类样式 .imgb
			$("#btn3").click(function(){
			//元素  上属性   |   元素可以加类名
			 $("img").attr("src","../img/gouzi.gif").toggleClass("imgb");
			$("audio").attr("src","../好汉歌.MP3");
			            });
		</script>
	</body>
</html>